<template>
  <component ref="zoomComponent"
             :is="componentName"
             v-bind="$attrs"
             v-on="$listeners" />
</template>

<script>
import MagnifyingGlass from './components/MagnifyingGlass'
import Magnifying from './components/Magnifying'

export default {
  name: 'VueMagnifierTing',

  props: {
    isGlass: {
      type: Boolean,
      default: false,
    },
  },
  components: { MagnifyingGlass, Magnifying },

  computed: {
    componentName() {
      return this.isGlass ? 'MagnifyingGlass' : 'Magnifying'
    },
  },
  data() {
    return {}
  },
  methods: {
    handleZoom(type, scale) {
      this.$refs.zoomComponent.handleZoom(type, scale)
    },
    handleRotate() {
      this.$refs.zoomComponent.handleRotate()
    },
    handleRest() {
      this.$refs.zoomComponent.handleRest()
    },
  },
}
</script>

<style scoped>
</style>
